Adwaita: Style separator.sidebar

Let separators be declared as sidebars to have the same style as those
drawn by GtkStackSidebar. This also let them handle the selection-mode
class, whether they are assigned it or they descend from something in
selection mode.

Also drop setting the selection mode color for non-sidebar separators.

This is convenient when building a custom sidebar using a GtkSeparator
and to extend a sidebar to the title bar.

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 2031b799069c3eb004c2ab357d719cc6fec9039f..30781a8cb362094439b9a338afcba3298338e483 100644 (file)
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -1643,7 +1643,7 @@ headerbar {
   // add vertical margins to common widget on the headerbar to avoid them spanning the whole height
   entry,
   spinbutton,
-  separator,
+  separator:not(.sidebar),
   button {
     margin-top: 6px;
     margin-bottom: 6px;
@@ -3605,10 +3605,6 @@ separator {
   background: transparentize(black, 0.9);
   min-width: 1px;
   min-height: 1px;
-
-  &.selection-mode {
-    background-color: darken($selected_bg_color, 20%);
-  }
 }
 
 
@@ -3815,19 +3811,21 @@ filechooserbutton:drop(active) {
   border-style: none;
   background-color: mix($bg_color, $base_color, 50%);
 
-  @at-root %sidebar_left,
-  &:dir(ltr),
-  &.left,
-  &.left:dir(rtl) {
-    border-right: 1px solid $borders_color;
-    border-left-style: none;
-  }
+  &:not(separator) {
+    @at-root %sidebar_left,
+    &:dir(ltr),
+    &.left,
+    &.left:dir(rtl) {
+      border-right: 1px solid $borders_color;
+      border-left-style: none;
+    }
 
-  @at-root %sidebar_right
-  &:dir(rtl),
-  &.right {
-    border-left: 1px solid $borders_color;
-    border-right-style: none;
+    @at-root %sidebar_right
+    &:dir(rtl),
+    &.right {
+      border-left: 1px solid $borders_color;
+      border-right-style: none;
+    }
   }
 
   &:backdrop {
@@ -3867,6 +3865,19 @@ stacksidebar {
   }
 }
 
+separator.sidebar {
+  background-color: $borders_color;
+
+  &:backdrop {
+    background-color: $backdrop_borders_color;
+  }
+
+  &.selection-mode,
+  .selection-mode & {
+    background-color: darken($selected_bg_color, 20%);
+  }
+}
+
 
 /****************
  * File chooser *

diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index c250eb223a09c567cea9c7bcb029d93b825f3d8e..ff295e242b2c43489709b242e30b79be7dbb1394 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -670,7 +670,7 @@ searchbar > revealer > box { padding: 6px; border-width: 0 0 1px; }
 
 .solid-csd .titlebar:backdrop:dir(rtl):not(headerbar), .solid-csd .titlebar:backdrop:dir(ltr):not(headerbar), .solid-csd .titlebar:dir(rtl):not(headerbar), .solid-csd .titlebar:dir(ltr):not(headerbar), .solid-csd headerbar:backdrop:dir(rtl), .solid-csd headerbar:backdrop:dir(ltr), .solid-csd headerbar:dir(rtl), .solid-csd headerbar:dir(ltr) { margin-left: -1px; margin-right: -1px; margin-top: -1px; border-radius: 0; box-shadow: none; }
 
-headerbar entry, headerbar spinbutton, headerbar separator, headerbar button { margin-top: 6px; margin-bottom: 6px; }
+headerbar entry, headerbar spinbutton, headerbar separator:not(.sidebar), headerbar button { margin-top: 6px; margin-bottom: 6px; }
 
 headerbar switch { margin-top: 9px; margin-bottom: 9px; }
 
@@ -1569,8 +1569,6 @@ scrolledwindow junction:backdrop { border-image-source: linear-gradient(to botto
 
 separator { background: rgba(0, 0, 0, 0.1); min-width: 1px; min-height: 1px; }
 
-separator.selection-mode { background-color: #0f2b48; }
-
 /********* Lists * */
 list { color: white; background-color: #232729; border-color: #1b1f20; }
 
@@ -1663,9 +1661,9 @@ filechooserbutton:drop(active) { box-shadow: none; border-color: transparent; }
 /*********** Sidebar * */
 .sidebar { border-style: none; background-color: #2b3032; }
 
-stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) { border-right: 1px solid #1b1f20; border-left-style: none; }
+stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:not(separator):dir(ltr), .sidebar:not(separator).left, .sidebar:not(separator).left:dir(rtl) { border-right: 1px solid #1b1f20; border-left-style: none; }
 
-stacksidebar.sidebar:dir(rtl) list .sidebar:dir(rtl), stacksidebar.sidebar.right list .sidebar:dir(rtl), .sidebar.right { border-left: 1px solid #1b1f20; border-right-style: none; }
+stacksidebar.sidebar:dir(rtl) list .sidebar:not(separator):dir(rtl), stacksidebar.sidebar.right list .sidebar:not(separator):dir(rtl), .sidebar:not(separator).right { border-left: 1px solid #1b1f20; border-right-style: none; }
 
 .sidebar:backdrop { background-color: #2c3133; border-color: #202425; transition: 200ms ease-out; }
 
@@ -1679,6 +1677,12 @@ stacksidebar row > label { padding-left: 6px; padding-right: 6px; }
 
 stacksidebar row.needs-attention > label { background-size: 6px 6px, 0 0; }
 
+separator.sidebar { background-color: #1b1f20; }
+
+separator.sidebar:backdrop { background-color: #202425; }
+
+separator.sidebar.selection-mode, .selection-mode separator.sidebar { background-color: #0f2b48; }
+
 /**************** File chooser * */
 row image.sidebar-icon { opacity: 0.7; }
 

diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 2ee69b8d8d8b9b85cb94bc6e272f9e6036fcedd1..28b698f69654561d3cd4992127f7d6b90826fef6 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -678,7 +678,7 @@ searchbar > revealer > box { padding: 6px; border-width: 0 0 1px; }
 
 .solid-csd .titlebar:backdrop:dir(rtl):not(headerbar), .solid-csd .titlebar:backdrop:dir(ltr):not(headerbar), .solid-csd .titlebar:dir(rtl):not(headerbar), .solid-csd .titlebar:dir(ltr):not(headerbar), .solid-csd headerbar:backdrop:dir(rtl), .solid-csd headerbar:backdrop:dir(ltr), .solid-csd headerbar:dir(rtl), .solid-csd headerbar:dir(ltr) { margin-left: -1px; margin-right: -1px; margin-top: -1px; border-radius: 0; box-shadow: none; }
 
-headerbar entry, headerbar spinbutton, headerbar separator, headerbar button { margin-top: 6px; margin-bottom: 6px; }
+headerbar entry, headerbar spinbutton, headerbar separator:not(.sidebar), headerbar button { margin-top: 6px; margin-bottom: 6px; }
 
 headerbar switch { margin-top: 9px; margin-bottom: 9px; }
 
@@ -1589,8 +1589,6 @@ scrolledwindow junction:backdrop { border-image-source: linear-gradient(to botto
 
 separator { background: rgba(0, 0, 0, 0.1); min-width: 1px; min-height: 1px; }
 
-separator.selection-mode { background-color: #215d9c; }
-
 /********* Lists * */
 list { color: black; background-color: #ffffff; border-color: #b6b6b3; }
 
@@ -1683,9 +1681,9 @@ filechooserbutton:drop(active) { box-shadow: none; border-color: transparent; }
 /*********** Sidebar * */
 .sidebar { border-style: none; background-color: #f4f4f3; }
 
-stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) { border-right: 1px solid #b6b6b3; border-left-style: none; }
+stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:not(separator):dir(ltr), .sidebar:not(separator).left, .sidebar:not(separator).left:dir(rtl) { border-right: 1px solid #b6b6b3; border-left-style: none; }
 
-stacksidebar.sidebar:dir(rtl) list .sidebar:dir(rtl), stacksidebar.sidebar.right list .sidebar:dir(rtl), .sidebar.right { border-left: 1px solid #b6b6b3; border-right-style: none; }
+stacksidebar.sidebar:dir(rtl) list .sidebar:not(separator):dir(rtl), stacksidebar.sidebar.right list .sidebar:not(separator):dir(rtl), .sidebar:not(separator).right { border-left: 1px solid #b6b6b3; border-right-style: none; }
 
 .sidebar:backdrop { background-color: #f2f2f2; border-color: #c0c0bd; transition: 200ms ease-out; }
 
@@ -1699,6 +1697,12 @@ stacksidebar row > label { padding-left: 6px; padding-right: 6px; }
 
 stacksidebar row.needs-attention > label { background-size: 6px 6px, 0 0; }
 
+separator.sidebar { background-color: #b6b6b3; }
+
+separator.sidebar:backdrop { background-color: #c0c0bd; }
+
+separator.sidebar.selection-mode, .selection-mode separator.sidebar { background-color: #215d9c; }
+
 /**************** File chooser * */
 row image.sidebar-icon { opacity: 0.7; }